<template>
  <div class="page">
    <back-btn></back-btn>
    <div>
      <div class="item item-avatar-left title">
        <img v-if="data.collegeInfo" :src="data.collegeInfo.schoolBadge | imgResize(50,50)" />
        <div class="item-content">
          <h3>{{data.name}}</h3>
          <div class="item">
            <p>
              <span v-if="data.collegeLevel.length>0" class="stable" v-for="(item,index) in data.collegeLevel" :key="index">{{item.name}} </span>
              <span v-if="data.collegeType" class="stable"> {{data.collegeType.name}}</span>
              <span v-if="data.city" class="stable"> {{data.city}}</span>
            </p>
            <p class="code stable" v-if="data.code">学校代码：{{data.code}}</p>
          </div>
        </div>
      </div>
      <tab-bar :tabsData="list" :currentIndex="curIndex" @tabClick="tabSwitch"></tab-bar>
    </div>
    <div class="content scroll-wrap">
      <div class="tab-content" v-if="data.collegeInfo">
        <div v-show="curIndex===0" class="p-0">
          <div class="list list-wrap" v-if="data.collegeInfo.description">
            <div class="item">
              <div class="vertical-bar"></div>
              <h3>简介</h3>
            </div>
            <p class="item item-text-wrap text">
              {{data.collegeInfo.description.trim()}}
            </p>
          </div>
          <div class="list list-wrap" v-if="data.collegeInfo.address||data.collegeInfo.officialWebsite">
            <div class="item">
              <div class="vertical-bar"></div>
              <h3>联系方式</h3>
            </div>
            <div class="item item-text-wrap text">
              <p>&nbsp;</p>
              <p v-if="data.collegeInfo.address">地址：{{data.collegeInfo.address}}</p>
              <p v-if="data.collegeInfo.officialWebsite">官网：{{data.collegeInfo.officialWebsite}}</p>
            </div>
          </div>
        </div>
        <div v-show="curIndex===1" class="p-0">
          <div class="item item-text-wrap icon-text">
            <div class="row row-wrap">
              <div class="col-3" v-if="data.collegeInfo.createdDate">
                <span class="icon icon-font icon-zdxk"></span>
                <span class="text">创办时间</span>
                <span class="energized">{{data.collegeInfo.createdDate}}</span>
              </div>
              <div class="col-3">
                <span class="icon icon-font icon-zdxk"></span>
                <span class="text">特色专业</span>
                <span class="energized">{{data.collegeInfo.numberOfSpecialty||0}}</span>
              </div>
              <div class="col-3">
                <span class="icon icon-font icon-zdxk"></span>
                <span class="text">重点学科</span>
                <span class="energized">{{data.collegeInfo.keyDiscipline||0}}</span>
              </div>
              <div class="col-3">
                <span class="icon icon-font icon-zdsys"></span>
                <span class="text">重点实验室</span>
                <span class="energized">{{data.collegeInfo.keyLaboratory||0}}</span>
              </div>
            </div>
          </div>
          <div class="list list-wrap" v-if="data.collegeInfo.doubleTopConstructionSpecialtyDesc">
            <div class="item">
              <div class="vertical-bar"></div>
              <h3>双一流建设专业</h3>
            </div>
            <div class="item item-text-wrap text">
              {{data.collegeInfo.doubleTopConstructionSpecialtyDesc}}
            </div>
          </div>
          <div class="list list-wrap" v-if="data.collegeInfo.keyDisciplineDesc">
            <div class="item">
              <div class="vertical-bar"></div>
              <h3>重点学科</h3>
            </div>
            <div class="item item-text-wrap text">
              {{data.collegeInfo.keyDisciplineDesc}}
            </div>
          </div>
          <div class="list list-wrap" v-if="data.collegeInfo.majorDesc">
            <div class="item">
              <div class="vertical-bar"></div>
              <h3>特色专业</h3>
            </div>
            <div class="item item-text-wrap text">
              {{data.collegeInfo.majorDesc}}
            </div>
          </div>
          <div class="list list-wrap" v-if="data.collegeInfo.keyLaboratoryDesc">
            <div class="item">
              <div class="vertical-bar"></div>
              <h3>重点实验室</h3>
            </div>
            <div class="item item-text-wrap text">
              {{data.collegeInfo.keyLaboratoryDesc}}
            </div>
          </div>
        </div>
        <div v-show="curIndex===2">
          <div class="picker">
            <span :class="pickerIndex===index?'badge badge-energized':''" v-for="(item,index) in pickerList" :key="index" @click="pickerSwitch(index)">{{item}}</span>
          </div>
          <div class="list major-list" v-if="major.length>0">
            <nuxt-link :to="{name:'xuanke-major-detail',query:{id:item.majorId,fromSchool: true,collegeName:data.name ,subjects: JSON.stringify(item),fromPage:fromPage}}" tag="a" class="item item-card item-icon-right item-avatar-left item-stripe" v-for="(item,index) in major" :key="index">
              <div class="item-content">
                <h3>{{item.majorName}}</h3>
                <p>
                  <span class="badge badge-dashed" v-if="item.type===0">不限</span>
                  <span class="badge" v-if="item.type!==0" :class="'badge-'+subjectTheme[ceil.id]" v-for="(ceil,cIndex) in item.subjects" :key="cIndex">{{ceil.name}}</span>
                  <span class="badge badge-dashed chooce" v-if="item.type!==0">{{item.desc}}</span>
                </p>
              </div>
              <div class="button energized border-energized button-clear">
                查看详情
              </div>
            </nuxt-link>
          </div>
          <no-content v-else></no-content>
          <paginate :total="totalElements" :current-page="page" ref="pageInfo" @pagechange="pagechange"></paginate>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { subjectTheme, api } from '@/utils'
export default {
  layout: 'xuanke',
  data () {
    return {
      page: 1,
      subjectTheme,
      list: ['概况', '教学', '专业'],
      curIndex: 0,
      collegeId: 0,
      data: {},
      pickerList: ['全部', '国家重点', '特色专业'],
      pickerIndex: 0,
      pages: 0,
      size: 15,
      major: [],
      totalPages: 0,
      fromPage: '',
      totalElements: 0
    }
  },
  methods: {
    tabSwitch (i) {
      this.curIndex = i
    },
    pickerSwitch (i) {
      this.pickerIndex = i
      this.getData()
    },
    // 获取专业列表
    getData () {
      let majorTypeId, params
      switch (this.pickerIndex) {
        case 1:
          majorTypeId = 1002
          break
        case 2:
          majorTypeId = 1001
          break
        default:
          majorTypeId = 0
          break
      }
      if (this.pickerIndex === 0) {
        params = { collegeId: this.collegeId, page: this.pages, size: this.size }
      } else {
        params = { collegeId: this.collegeId, majorTypeId: majorTypeId, page: this.pages, size: this.size }
      }
      this.$axios.get(api.queryCollegeMajorByCollegeId, { params: params }).then(data => {
        if (data) {
          data.content.forEach(item => {
            item.desc = (item.type !== 0) ? `${parseInt(item.type / 10)}选${item.type % 10}` : ''
          })
          this.major = data.content
          this.totalPages = data.totalPages
          this.totalElements = data.totalElements
        } else {
          this.major = []
          this.totalElements = 0
        }
      })
    },
    // 分页
    pagechange (currentPage) {
      this.page = currentPage
      this.pages = currentPage - 1
      this.getData()
    }
  },
  beforeMount () {
    this.curIndex = 0
    this.collegeId = this.$route.query.id
    this.pageType = this.$route.query.pageType
    this.fromPage = this.$route.query.fromPage
    if (!this.$store.state.chooceSubject) {
      this.$store.commit('SET_CHOOSE_SUBJECT', '')
    }
    this.$axios.get(api.queryByCollegeId, { params: { collegeId: this.collegeId } }).then(data => {
      this.data = data
    })
    this.getData()
  }
}
</script>

<style scoped lang="scss">
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  .content {
    position: relative;
    flex: 1;
    // overflow-y: auto;
    .icon-text {
      margin-bottom: 15px;
      padding-top: 0;
      .row {
        span {
          vertical-align: middle;
          &.text {
            margin: 0 5px;
          }
          &.icon-font {
            font-size: 27px;
          }
        }
      }
    }
    .p-0 {
      .list {
        margin-bottom: 15px;
        .item-text-wrap {
          font-size: $size16;
          color: $dark01;
          line-height: 18px;
        }
        .item {
          padding: 0;
        }
      }
    }
    .picker {
      background: transparent;
      > span {
        margin-right: 15px;
        font-size: 18px;
        line-height: 25px;
        cursor: pointer;
        transition: color 0.3s;
      }
    }
    .major-list {
      margin-top: 25px;
      .item {
        &-stripe {
          margin: 0 -20px;
        }
        h3 {
          margin-bottom: 8px;
        }
      }
      .badge {
        margin-right: 5px;
        &.chooce {
          margin-left: 5px;
        }
      }
    }
  }
  .title {
    padding: 10px 25px;
    border-bottom: 1px solid $stable-ec;
    .item-content {
      .item {
        padding-top: 10px;
        justify-content: space-between;
      }
    }
  }
}
</style>
